// 模板引擎模块(失败)
// function onShop() {
//     let cartListStr = localStorage.getItem('CARTS')
//     let cartList = JSON.parse(cartListStr) || []
//     // console.log(cartList);
//     let quaXua = false
//     let data = {
//         cart: cartList,


//     }
//     // console.log(data)
//     let cartStr = template('cartList', data)
//     $('table').html(cartStr)

// }




// /**
//  * 删除
//  */

// function onDelete(id) {
//     //  console.log(id);
//     let cont = localStorage.getItem('CARTS')
//     let cart = JSON.parse(cont) || []
//     // console.log(cart);
//     let a = cart.find((item) => {
//         return id == item.id
//     })
//     let b = cart.indexOf(a)
//     if (a) cart.splice(b, 1)

//     // console.log(cart);
//     localStorage.setItem('CARTS', JSON.stringify(cart))

//     onShop()
// }


// // function onDelete(id) {
// // 	let cartListStr = localStorage.getItem('CARTS')
// // 	let cartList = JSON.parse(cartListStr) || []
// // 	cartList.splice(id, 1)
// //     console.log(cartList);
// // 	localStorage.setItem('CARTS', JSON.stringify(cartList))

// // 	onShop()
// // }
// /**
//  * 加
//  *   
//  */

// function onPlusPrice(i) {
//     console.log(i);
//     let cont = localStorage.getItem('CARTS')
//     let cart = JSON.parse(cont)
//     console.log(cart);
//     let a = cart.find((item) => {
//         return i == item.id
//     })
//     let b = cart.indexOf(a)
//     if (a) cart[b].num++
//     // console.log(a);
//     if (a) {
//         cart[b].singlePrice = Number((cart[b].price * cart[b].num).toFixed(2))
//     }
//     // cart[i].singlePrice = Number((cart[i].price*cart[i].num).toFixed(2))
//     localStorage.setItem('CARTS', JSON.stringify(cart))

//     onShop()

// }

// function onMinusPrice(i) {
//     let cont = localStorage.getItem('CARTS')
//     let cart = JSON.parse(cont)

//     let a = cart.find((item) => {
//         return i == item.id
//     })
//     let b = cart.indexOf(a)
//     if (a) {
//         if (--cart[b].num < 0) {
//             cart[b].num = 0
//         }
//     }
//     // console.log(a);
//     if (a) {
//         cart[b].singlePrice = Number((cart[b].price * cart[b].num).toFixed(2))
//     }
//     localStorage.setItem('CARTS', JSON.stringify(cart))
//     onShop()
// }

// /**
//  * 失去焦点
//  *   
//  */
// function onAmout(j, i) {
//     let cont = localStorage.getItem('CARTS')
//     let cart = JSON.parse(cont) || []

//     console.log(cart);
//     let a = cart.find((item) => {
//         return j == item.id
//     })
//     let b = cart.indexOf(a)

//     // if(a){
//     //     console.log([b].value);
//     // }
//     // // cart[i].num = j.value cart[i].num = b.value
//     // if(a){
//     //     cart[b].singlePrice= Number((cart[b].price*cart[b].num).toFixed(2))
//     // }

//     let srt = i.value
//     // console.log(srt);
//     a.num = srt
//     // cart[j].singlePrice
//     // a.singlePrice=Number((a.price*a.num).toFixed(2))
//     if (a) {
//         cart[b].singlePrice = Number((cart[b].price * cart[b].num).toFixed(2))
//     }
//     console.log(a.singlePrice);

//     // console.log(cart[b].singlePrice);
//     localStorage.setItem('CARTS', JSON.stringify(cart))
//     onShop()
// }

// function zj(){
//     let cont = localStorage.getItem('CARTS')
//     let cart = JSON.parse(cont)
//     let num = cart.filter(item=>{
//         return item.state == true
//     })
//     let sum =0
//     num.forEach(item=>{
//         sum+=item.singlePrice
//     })

//     $('h3>span').html(sum.toFixed(2))
//     console.log($('h3>span'));
// }
// /**
//  * 复选框
//  */
//  let qx= false
//  function onAll(){
   
//      console.log('8');
//     let cont = localStorage.getItem('CARTS')
//     let cart = JSON.parse(cont)
//     if(qx ==false ){
//         qx = true
//         cart.forEach(item => {
//             item.state= true
//         })
//     }else{
//         qx = false
//         cart.forEach(item =>{
//             item.state = false
//         })
//     }
//     // console.log(cart);
//     localStorage.setItem('CARTS',JSON.stringify(cart))
//     onShop()

// }

// /**
//  * 单选框
//  */
// function onCheck(i){
//     let cont = localStorage.getItem('CARTS')
//     let cart = JSON.parse(cont)
//     if(cart[i] .state== false){
//         cart[i] .state= true
//     }else{
//         cart[i] .state= false
//     }
//     let con = cart.filter(item=>{
//         return item.state == true
//     })
//     if(con.length == cart.length){
//         qx=true
//     }else{
//         qx=false
//     }
//     localStorage.setItem('CARTS',JSON.stringify(cart))
//     zj()
//     fn()
// }

// onShop()


// 模板字符串模块


let qx = false
// 模板字符串模块

/**
 * 显示购物车列表
 */
function fn() {
    // 接收数据
    let cont = localStorage.getItem('CARTS')
    // console.log(cont);
    let cart = JSON.parse(cont) || []
    console.log(cart);
    let str = `
    <tr>
                                                            // 复选框          三元运算符判断
            <th><input type="checkbox" name="checkbox-all" onclick="onAll()"  ${qx?'checked':''}></th>
            <th>商品图片</th>
            <th>商品信息</th>
            <th>单价</th>
            <th>数量</th>
            <th>总价</th>
            <th>操作</th>
            </tr>
        `
        // map循环遍历      项      下标
    let nawArr = cart.map((item, index) => {
        return `
        <tr>
                                                        //单选框             传下标     三元运算符判断
        <td><input type="checkbox" name="checkbox-item"  onclick="onCheck(${index})" ${item.state?'checked':''}></td>
            <td><img src="${item.img}" alt="pic1"></td>
            <td>${item.name}</td>
            <td>￥${item.price}</td>
            <td></td>
            <td>
                    <input type="button" name="minus" value="-" onclick="onMinusPrice(${index})" }>
                    <input type="text" name="amount"  value="${item.num}" onblur="onAmout(this,${index})">
                    <input type="button" name="plus" value="+" onclick="onPlusPrice(${index})">
                </td>
            <td>￥${item.singlePrice}</td>
            <td>
                <a href="#">移入收藏</a><br />
                <a href="#" onclick="onDelete(${index})">删除</a>
            </td>
        </tr>
    
    `
    })

    str += nawArr.join('')
    // console.log(str);
    // 把数据追加到table后
    $('table').html(str)
    // console.log($('table').html());
}
fn()
/**
 * 删除购物项
 * @param {*} id
 */

function onDelete(id){
    let cont = localStorage.getItem('CARTS')
    // console.log(cont);
    let cart = JSON.parse(cont)
    cart.splice(id,1)
    localStorage.setItem('CARTS',JSON.stringify(cart))
    zj()
    fn()
}


/**
 * 加
 *   
 */

function onPlusPrice(i){
    let cont =localStorage.getItem('CARTS')
    let cart = JSON.parse(cont)
    // console.log(cart[i]);
    cart[i].num++
    cart[i].singlePrice = Number((cart[i].price*cart[i].num).toFixed(2))
    localStorage.setItem('CARTS',JSON.stringify(cart))
    zj()
    fn()

}

/**
 * 减
 *   
 */
function onMinusPrice(i){
    let cont = localStorage.getItem('CARTS')
    let cart = JSON.parse(cont)
    if(--cart[i].num < 0 ){
        cart[i].num = 0
    }
    cart[i].singlePrice = Number((cart[i].price*cart[i].num).toFixed(2))
    localStorage.setItem('CARTS',JSON.stringify(cart))
    zj()
    fn()
}

/**
 * 失去焦点
 *   
 */
function onAmout(j,i){
    let cont = localStorage.getItem('CARTS')
    let cart = JSON.parse(cont)
    cart[i].num = j.value
    cart[i].singlePrice = Number((cart[i].price*cart[i].num).toFixed(2))
    localStorage.setItem('CARTS',JSON.stringify(cart))
    zj()
    fn()
}
/**
 * 复选框
 */

function onAll(){
    // console.log('8');
    let cont = localStorage.getItem('CARTS')
    let cart = JSON.parse(cont)
    if(qx ==false ){
        qx = true
        cart.forEach(item => {
            item.state= true
        })
    }else{
        qx = false
        cart.forEach(item =>{
            item.state = false
        })
    }
    // console.log(cart);
    localStorage.setItem('CARTS',JSON.stringify(cart))
    zj()
    fn()

}

/**
 * 单选框
 */
function onCheck(i){
    let cont = localStorage.getItem('CARTS')
    let cart = JSON.parse(cont)
    if(cart[i] .state== false){
        cart[i] .state= true
    }else{
        cart[i] .state= false
    }
    let con = cart.filter(item=>{
        return item.state == true
    })
    if(con.length == cart.length){
        qx=true
    }else{
        qx=false
    }
    localStorage.setItem('CARTS',JSON.stringify(cart))
    zj()
    fn()
}


function zj(){
    let cont = localStorage.getItem('CARTS')
    let cart = JSON.parse(cont)
    let num = cart.filter(item=>{
        return item.state == true
    })
    let sum =0
    num.forEach(item=>{
        sum+=item.singlePrice
    })

    $('h3>span').html(sum.toFixed(2))
}


function homepage() {
    location.href = './index.html'
}
